<template>
  <view class="main-box">
    <view class="img-container">
      <image
        class="topImg"
        src="../../../static/images/bgc_01.png"
        style="height: 510rpx; width: 750rpx"
        model="scaleToFill"
      ></image>
      <view style="position:absolute;top:30rpx;right:40rpx">
         <image style="width:40rpx;height:40rpx" src="../../../static/images/photo.png" mode="scaleToFill" />
         <text style="color:#F0E5E5;position:relative;top:-6rpx;left:6rpx">{{userName}}</text>
      </view> 
    </view>
    <view class="containerBody">
      <view class="content-card-box">
        <view class="card-right">
          <view style="flex: 1; margin-right: 30rpx">
            <cmpFillCard
              :cardData="writeDailyData"
              @handleDaily="handleViewDaily"
            />
          </view>
          <view style="flex: 1">
            <cmpFillCard  style="width:133rpx"
              :cardData="editDailyData"
              @handleDaily="handleCountDaily"
            />
          </view>
        </view>
      </view>
      <view style=" box-sizing: border-box; height: 126rpx;margin-top:176rpx">
        <image
          class="bottomImg"
          src="../../../static/images/bannerBom.png"
        ></image>
      </view>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
  </view>
</template>
<script>
import cmpFillCard from '../../../components/cmp-fill-card.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import {
  getDetailSysEndTime,
  checkTransferedDailyFun,
  setMessageData,
  getDailyByClerkFun,
} from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      timeShow: false,
      timer: null,
      reFresh: true,
      submitStatusObj: {},
      timeData: '',
      distanceDate: '',
      show: false,
      notifyShow: false,
      writeDailyData: {
        title: '汇总日报',
        info: '整理修改已填报日报',
        height: '190rpx',
        imgSrc: '../../../static/images/daily_view.png',
      },
      editDailyData: {
        title: '分享转发日报',
        info: '对每天的日报进行汇总分享转发',
        count: 4,
        height: '190rpx',
        imgSrc: '../../../static/images/summary_a.png',
      },
      userName:''
    }
  },
  mounted(){
    this.userName=this.$store.state.userInfo.userName 
  },
  onShow() {
    this.countDown()
    getDetailSysEndTime().then((timeRes) => {
      this.timeData = timeRes.data.endTime
    })
    getDailyByClerkFun({
      leaderid: this.userInfo.userId,
      createBy: this.userInfo.userId,
    }).then((res) => {
      this.submitStatusObj = res.data
    })
    uni.hideTabBar({
      animation: false,
    })
  },
  onUnload() {
    clearInterval(this.timer)
  },
  onHide() {
    clearInterval(this.timer)
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  watch: {
    $route: {
      handler(newRouter) {
        clearInterval(this.timer)
      },
      immediate: true,
    },
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  methods: {
    handleViewDaily() {
      uni.navigateTo({
        url: '/pagesC/summary-daily/view-detail/index',
      })
    },
    handleCountDaily() {
      uni.navigateTo({
        url: '/pagesC/summary-daily/view-detail/summary-count',
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  components: {
    cmpFillCard,
    cmpTabBar,
  },
}
</script>

<style lang="scss" scoped>
.content-card-box {
  margin-top: 30rpx;
  display: flex;
  .card-left {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
    margin: 0rpx 32rpx;
  }
  .card-right {
    display: flex;
    margin: 30rpx;
    flex: 1;
    position: relative;
  }
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  .slot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.document-info {
  margin-top: 24rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #383839;
  line-height: 30rpx;
}
.document-btn {
  display: flex;
  margin: 75rpx 0rpx 20rpx 0rpx;
}
.img-container {
  width: 100%;
}
.topImg {
  width: 100%;
}
.containerBody {
  .warning-time {
    height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .time {
    font-size: 32rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  .daily_down {
    font-size: 32rpx;
    font-weight: bold;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 80rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  width: 100%;
  bottom: -6rpx;
}
</style>
